<template>
	<view class="container">
		<view class="header">
			<view class="userInfo">
				<image class="headPic" :src="userInfo.avatar" mode="scaleToFill" />
				<view class="head">
					<view class="title">
						{{ userInfo.nickname }}
						<image @click="toSet" class="set" src="/static/manage/set.png" mode="scaleToFill" />
					</view>
					<view class="telephone">{{ userInfo.mobile }}</view>
					<view>
						<image class="tag1" src="/static/manage/tag1.png" mode="scaleToFill" />
						<image class="tag2" src="/static/manage/tag2.png" mode="scaleToFill" />
					</view>
				</view>
			</view>
		</view>
		<view class="contain">
			<div class="earnings" @click="toEarning">
				<view class="myEarnings">
					<view>我的收益</view>
					<image class="right" src="/static/manage/right.png" mode="scaleToFill" />
				</view>
				<view class="haveMoney">余额：￥1168</view>
			</div>
			<div class="Invite" @click="toInvite">
				<view class="myEarnings">
					<view>邀请码</view>
					<image class="right" src="/static/manage/right.png" mode="scaleToFill" />
				</view>
				<view class="haveMoney">邀好友得收益</view>
			</div>
		</view>
		<view class="order">
			<view class="myOrder" @click="allOrders">
				<view class="my">我的订单</view>
				<view class="all">
					全部订单
					<image class="right" src="/static/manage/right.png" mode="scaleToFill" />
				</view>
			</view>
			<view class="orderInfo">
				<view v-for="(item,index) in list" :key="index" class="item" @click="orderInfo(item.value)">
					<image :src="item.icon" mode="scaleToFill" />
					<view>{{ item.name }}</view>
				</view>
			</view>
		</view>
		<view class="myInfo">
			<view class="infoItem" @click="toAddress">
				<view class="item">
					<image class="itemPic" src="/static/manage/address.png" mode="scaleToFill" />
					<view class="itemname">我的地址</view>
				</view>
				<image class="right" src="/static/manage/right.png" mode="scaleToFill" />
			</view>
			<view class="line"></view>
			<view class="infoItem" @click="toCollect">
				<view class="item">
					<image class="itemPic" src="/static/manage/collect.png" mode="scaleToFill" />
					<view class="itemname">我的收藏</view>
				</view>
				<image class="right" src="/static/manage/right.png" mode="scaleToFill" />
			</view>
			<view class="line"></view>
			<view class="infoItem">
				<view class="item">
					<image class="itemPic" src="/static/manage/contact.png" mode="scaleToFill" />
					<view class="itemname">联系客服</view>
				</view>
				<image class="right" src="/static/manage/right.png" mode="scaleToFill" />
			</view>
		</view>
		<Tabbar />
	</view>
</template>

<script setup>
	import Tabbar from '@/components/Tabbar/index.vue'
	import {
		ref
	} from 'vue'
	import {
		myUserInfo
	} from '@/service/index.ts'
	import {
		onShow
	} from "@dcloudio/uni-app"


	// 用户信息
	const userInfo = ref({})
	// 获取用户信息
	const getUserInfo = () => {
		myUserInfo().then(res => {
			userInfo.value = res
			console.log(res);
		})
	}

	onShow(() => {
		uni.hideTabBar()
		getUserInfo()
	})

	// 订单跳转列表
	const list = [{
			name: '待付款',
			icon: '/static/manage/waitpay.png',
			value: 1
		},
		{
			name: '待核销',
			icon: '/static/manage/waituse.png',
			value: 4
		},
		{
			name: '待服务',
			icon: '/static/manage/waitserve.png',
			value: 5
		},
		{
			name: '已完成',
			icon: '/static/manage/finish.png',
			value: 7
		},
		{
			name: '已取消',
			icon: '/static/manage/concal.png',
			value: 6
		},
	]

	// 跳转收益页面
	const toEarning = () => {
		uni.navigateTo({
			url: '/pages/earnings/index/index'
		})
	}
	// 跳转地址页面
	const toAddress = () => {
		uni.navigateTo({
			url: '/pages/address/index'
		})
	}
	// 跳转收藏页面
	const toCollect = () => {
		uni.navigateTo({
			url: '/pages/Collect/Collect'
		})
	}
	// 跳转全部订单页面
	const allOrders = () => {
		wx.switchTab({
			url: '/pages/order/index/index'
		})
	}
	// 跳转对应订单页面
	const orderInfo = (value) => {
		getApp().globalData.orderStatus = value
		uni.switchTab({
			url: `/pages/order/index/index`
		})
	}

	// 跳转设置页面
	const toSet = () => {
		uni.navigateTo({
			url: '/pages/My/My'
		})
	}
	// 跳转邀请页面
	const toInvite = () => {
		uni.navigateTo({
			url: '/subPages/Poster/Poster'
		})
	}
</script>

<style lang="scss">
	$gap-x: 28rpx;

	.container {
		min-height: 100vh;
		background: $body-bc;
		color: $content-color;
		padding-bottom: 140rpx;

		.header {
			background: url('/static/manage/banner.png') center center no-repeat;
			background-size: 100% 100%;
			padding: 70rpx 76rpx 100rpx 68rpx;

			.headPic {
				width: 130rpx;
				height: 130rpx;
				margin-right: 37rpx;
				border-radius: 100%;
			}

			.head {
				flex: 1;
			}

			.set {
				width: 34rpx;
				height: 34rpx;
			}

			.title {
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 34rpx;
				color: #00C1FF;
				line-height: 50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.telephone {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #00C1FF;
				line-height: 50rpx;
			}

			.tag1 {
				width: 152rpx;
				height: 38rpx;
			}

			.tag2 {
				width: 138rpx;
				height: 38rpx;
			}

			.userInfo {
				display: flex;
			}
		}

		.contain {
			padding: 0 28rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 22rpx;

			.earnings {
				flex: 1;
				background: url('/static/manage/earnings.png') center center no-repeat;
				background-size: 100% 100%;
				margin-right: 26rpx;
				padding: 39rpx 0 43rpx 29rpx;
			}

			.myEarnings {
				display: flex;
				align-items: center;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 30rpx;
				color: #00C1FF;
				line-height: 37rpx;
			}

			.haveMoney {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #3A75C0;
				line-height: 37rpx;
				margin-top: 13rpx;
			}

			.Invite {
				flex: 1;
				background: url('/static/manage/Invite.png') center center no-repeat;
				background-size: 100% 100%;
				padding: 39rpx 0 43rpx 29rpx;
			}
		}

		.order {
			background: #112959;
			border-radius: 20rpx;
			margin: 0 28rpx 26rpx;
			padding: 30rpx;

			.myOrder {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;

				.my {
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 30rpx;
					color: #00C1FF;
					line-height: 27rpx;
				}

				.all {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #3A75C0;
					line-height: 27rpx;
				}
			}

			.orderInfo {
				display: flex;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #00C1FF;
					line-height: 42rpx;

					image {
						width: 84rpx;
						height: 84rpx;
					}
				}
			}
		}

		.right {
			width: 11rpx;
			height: 18rpx;
			margin-left: 16rpx;
		}

		.myInfo {
			background: #112959;
			border-radius: 20rpx;
			margin: 0 28rpx;
			padding: 30rpx;

			.infoItem {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.item {
				display: flex;
				align-items: center;
			}

			.itemPic {
				width: 33rpx;
				height: 33rpx;
				margin-right: 17rpx;
			}

			.itemname {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 26rpx;
				color: #00C1FF;
				line-height: 37rpx;
			}

			.line {
				height: 1rpx;
				background: #25488E;
				margin: 36rpx 0;
			}
		}
	}
</style>